<template>
  <!-- 没有照片 -->
  <van-cell v-if="type === 0" :title="articleInfo.title" :label="label" />
  <!-- 1张 -->
  <van-cell v-else-if="type === 1" :title="articleInfo.title" :label="label">
    <van-image width="100" height="100" :src="articleInfo.cover.images[0]" />
  </van-cell>
  <!-- 3张 -->
  <van-cell v-else :title="articleInfo.title">
    <template #label>
      <van-image
        v-for="(item, i) in articleInfo.cover?.images"
        :key="i"
        width="100"
        height="100"
        :src="item"
      />
      <span>{{ label }}</span>
    </template>
  </van-cell>
</template>

<script>
import dayjs from '@/utils/dayjs'
export default {
  props: {
    // default:如果是基本数据类型直接给它，如果是复杂数据类型通过函数的返回值给它
    articleInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    type() {
      return this.articleInfo.cover?.type
    },
    label() {
      const { aut_name, pubdate, comm_count } = this.articleInfo
      return `${aut_name} ${comm_count}评论 ${dayjs(pubdate).fromNow()}`
    }
  }
}
</script>

<style></style>
